<template>
  <div class="details_pet_box">
    <!--宠物详情navbar-->
    <PetDetailNavbar />
    <!--轮播图-->
    <PetDetailSwiper :img="petdetailsList[0]?.pet_images" />
    <!--内容-->
    <PetDetailContent :petdetailsList="petdetailsList[0]" />
    <!--底部navbar-->
    <PetDetailsBase
      :petdetailsList="petdetailsList[0]"
      @handleGetList="GetPetdetails"
    />
  </div>
</template>

<script>
import PetDetailNavbar from "@/views/petTable/component/PetDetailNavbar";
import PetDetailSwiper from "@/views/petTable/component/PetDetailSwiper";
import PetDetailContent from "@/views/petTable/component/PetDetailContent";
import PetDetailsBase from "@/views/petTable/component/PetDetailsBase";
import { ref } from "vue";
import { getPetdetails } from "@/api/home";
import { useRoute } from "vue-router";
export default {
  name: "detailsPet",
  props: {
    // 接收宠物详情NavBar返回地址
    // routeTarget: {
    //   typr: String,
    //   default: "/petTable",
    // },
  },
  setup() {
    const { GetPetdetails, petdetailsList } = handleGetPetdetails();
    GetPetdetails();
    return { petdetailsList, GetPetdetails };
  },
  components: {
    PetDetailsBase,
    PetDetailContent,
    PetDetailSwiper,
    PetDetailNavbar,
  },
};
//获取宠物详情数据
function handleGetPetdetails() {
  const route = useRoute();
  const petdetailsList = ref([]);
  const GetPetdetails = () => {
    // console.log(route.path.split('/')[2]);
    getPetdetails(route.path.split("/")[2]).then((res) => {
      console.log(res);
      petdetailsList.value = res.data;
      // console.log(petdetailsList.value);
    });
  };
  return { GetPetdetails, petdetailsList };
}
</script>

<style scoped>
.details_pet_box {
  padding: 2.6rem 0 2.7rem 0;
}
</style>
